<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>添加演示</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <!-- <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css"> -->
    <style>
        .layui-layout-admin .layui-logo {
            left: 2rem;
            text-align: left;
            color: #fff;
        }

        #card-show a:hover {
            background-color: yellow;
            bottom: 2rem;
        }
    </style>
</head>

<body style="background-color: #F3F5F6;">
    <div class="layui-layout layui-layout-admin">
        <!-- 顶部导航栏 -->
        <div class="layui-header header">
            <div class="layui-logo">问卷调查</div>
            <ul class="layui-nav " lay-filter="" style="margin-left: 6rem;">
                <li class="layui-nav-item layui-this"><a href="/">我的项目</a></li>
                <li class="layui-nav-item"><a href="/add">数据</a></li>
                
            </ul>
            <!-- 顶部状态栏右侧 -->
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item">
                    <a href=""><img src="./imgs/boy-avatar.png" class="layui-nav-img">{{nickname}}</a>
                    <!-- <a href="">{{nickname}}</a> -->
                    <dl class="layui-nav-child">
                        <!-- <dd><a href="javascript:;">修改信息</a></dd>
                        <dd><a href="javascript:;">安全管理</a></dd> -->
                        <dd><a href="javascript:;" onclick="logout()">退了</a></dd>
                    </dl>
                </li>
            </ul>
        </div>


        <!--右侧主体内容区-->
        <div class="layui-body" style="left: 0rem;margin-top: 1rem;">
            <!-- <div class="layui-container">  -->
            <div class="layui-row">
                <div class="layui-col-md1 layui-col-xs1 layui-col-sm1">
                    &nbsp;
                </div>
                <div class="layui-col-md10 layui-col-xs10 layui-col-sm10">
                    <div id="title" class="layui-col-xs12 layui-col-sm12 layui-col-md12" style="text-align: center;">
                        <h1>{{qneTitle}}</h1>
                        <blockquote class="layui-elem-quote">{{qnePresentation}}</blockquote>
                    </div>
                    <hr class="layui-border-green">
                    <form class="layui-form" action="" id="content">
                        <div id="problem">
                            {% for count in counts %}
                            <div class="layui-form-item">
                                <label class="layui-form-label">题目：</label>
                                <div class="layui-input-block" id="form{{count.id}}">
                                    <div class="layui-form layui-word"
                                        style="padding-top: 0.56rem;margin-bottom: 0.5rem;">{{count.countContent}}</div>
                                    <!-- <label class="layui-form-label"></label> -->
                                    {% if (count.optTypes==1) %}
                                    <input type="text" name="qus{{count.optId}}" required lay-verify="optVal"
                                        optValue="{{count.optContents}}" placeholder="请输入0-{{count.optContents}}分"
                                        autocomplete="off" value="" class="layui-input">
                                    {% elseif (count.optTypes==2) %}
                                    <select name="qus{{count.optId}}" lay-verify="required" id="sco${data.id}">
                                        {% for i in range(0,count.optContents) %}
                                        <option value="{{i}}">{{i}}分</option>
                                        {% endfor %}
                                        <option value="{{count.optContents}}">{{count.optContents}}分</option>
                                    </select>
                                    {% endif%}
                                </div>

                            </div>
                            {% endfor %}
                        </div>
                        <div id="submitForm">
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                </div>
                            </div>
                        </div>
                    </form>
                    <!-- 底部留空 -->
                    <div style="margin-bottom: 3rem;">
                        <p>&nbsp;</p>
                    </div>



                </div>
                <div class="layui-col-md1 layui-col-xs1 layui-col-sm1">
                    &nbsp;
                </div>
            </div>
            <!-- </div> -->



        </div>


        <div class="layui-footer" style="left: 0rem;">
            <!-- 底部固定区域 -->
            © layui.com - 底部固定区域
        </div>
    </div>

    <script src="/static/js/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="/static/layui/layui.js"></script>
    <script>
        // 注销
        function logout() {
            layer.open({
                title: "注销",
                content: "是否退出当前用户？", //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                btn: ['注销', '取消']
                , yes: function (index, layero) {
                    axios({
                        method: 'post',
                        url: '/logout'
                    }).then(function (response) {
                        // axios工具下，服务器真正返回的数据在返回对象的data中
                        let res = response.data;
                        if (res.code === 200) {
                            window.location.href = '/login';
                        }
                    })
                }
                , btn2: function (index, layero) {
                    //按钮【按钮二】的回调

                    // return false //开启该代码可禁止点击该按钮关闭
                }
            })
        }
        layui.use(["form", "layer"], function () {
            var form = layui.form;
            var layer = layui.layer;

            form.verify({
                optVal: function (value, item) { //value：表单的值、item：表单的DOM对象
                    let optValue = Number($(item).attr("optvalue"));
                    if (value != "") {
                        if (value >= 0) {
                            if (!isNaN(value)) {
                                if (value > optValue) {
                                    return '分值不能大于' + optValue + ' \'_\'';
                                }
                            } else {
                                return '分值必须是数字 \'_\'';
                            }
                        } else {
                            return '分值必须大于等于0 \'_\'';
                        }
                    }
                    else {
                        return '分值不能为空 \'_\'';
                    }

                }
            });
            // function load(){
            //     var id = Number(location.search.substring(4));
            //     console.log("wdsd");
            //     axios({
            //         method:"post",
            //         url:"/countShowLoad",
            //         data:{
            //             id:id
            //         }
            //     }).then(function(res){
            //         console.log("sss");
            //     })
            // }
            form.on('submit', function (data) {
                axios({
                    method: "post",
                    url: "/countShowSubmit",
                    data: {
                        subForm: data.field
                    }
                }).then(function (res) {
                    res = res.data;
                    let code = res.code;
                    if (code === 200) {
                        window.location.href = "/showSubmitOk?id=1"
                        console.log("提交成功了");
                    } else {
                        console.log("提交失败");
                    }
                })
                // console.log(data.field);

                return false;
            });
        })

    </script>
</body>

</html>